<!doctype html>
<html class="no-js">

<head>
    <title>购物车</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/cart.css">
</head>

<body>
    <div id="app">
        <ul class="am-list cart-list">
            <#list products as item>
                <li>
                    <div class="cart-item">
                        <input type="hidden" class="productId" value="${item.id!}">
                        <input type="hidden" class="productTypeId" value="${item.productItemId!}" />
                        <input type="hidden" class="productPrice" value="${(item.price*item.productNum)/100.0!}" />
                        <div class="selector am-vertical-align">
                            <input type="checkbox" value="" class="checkbox am-vertical-align-middle" />
                        </div>
                        <div class="info am-g">
                            <div class="am-u-sm-3">
                                <a href="/tg/product/getProductById?id=${item.productId!}">
                                    <img src="${item.cover!}" class="am-img-responsive" />
                                </a>
                            </div>
                            <div class="am-u-sm-9">
                                <div class="name">
                                    <a href="/tg/product/getProductById?id=${item.productId!}">
                                        <span>${item.name!}</span>
                                    </a>
                                    <span class="delete-span"><a href="javascript:" class="delete"><i class="am-icon-trash-o"></i></a></span>
                                </div>
                                <a href="javascript:" data-am-modal="{target: '#selectType-${item.id}'}">
                                    <div class="type">
                                        <span class="productType">${item.itemName!}</span>
                                    </div>
                                </a>
                                <div class="options">
                                    <div class="price">￥<span class="singlePrice">${(item.price/100.0)!}</span></div>
                                    <div class="count am-input-group">
                                        <span class="am-input-group-btn">
                                            <button class="am-btn am-btn-default minus" type="button"><i class="am-icon-minus"></i></button>
                                        </span>
                                        <input type="text" class="am-form-field am-input-sm buyCount" type="number" value="${item.productNum!}">
                                        <span class="am-input-group-btn">
                                            <button class="am-btn am-btn-default plus" type="button"><i class="am-icon-plus"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <#if item.productItem??>
                            <div class="am-modal-actions select-type" id="selectType-${item.id}">
                                <div class="am-modal-actions-group">
                                    <div class="content">
                                        <div class="am-g">
                                            <div class="am-u-sm-3">
                                                <img src="${item.cover!}" class="am-img-responsive" />
                                            </div>
                                            <div class="am-u-sm-9">
                                                <div class="price">￥${(item.price/100.0)!}</div>
                                                <div>${item.name!}</div>
                                            </div>
                                        </div>
                                        <div class="type">
                                            <#list item.productItem as type>
                                                <div class="type-item" data-id="${type.id!}" data-price="${(type.price/100.0)!}">${type.itemName!}</div>
                                            </#list>
                                        </div>
                                    </div>
                                    <div>
                                        <button class="am-btn am-btn-secondary am-btn-block changeType">确定</button>
                                    </div>
                                </div>
                            </div>
                        </#if>
                    </div>
                </li>
            </#list>
        </ul>
        <div class="bottom am-g">
            <div class="am-u-sm-3 selector">
                <input type="checkbox" id="selectAll" /><span>全选</span>
            </div>
            <div class="am-u-sm-5 price">
                <span>合计：</span>
                <span id="totalPrice">￥0</span>
            </div>
            <div class="am-u-sm-4 button">
                <a href="javascript:" class="am-btn am-btn-default" role="button" id="settlement">结算</a>
            </div>
        </div>
        <#include "/res/components/footer.html" />
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <#include "/res/components/http.html" />
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
    /*wx.ready(function() {
        initWXShare()
    })*/
    </script>
    <script>
    $(document).ready(function() {
        $("#settlement").click(function() {
            var ids = "";
            $(".checkbox").each(function() {
                if ($(this).prop("checked")) {
                    var selectedItem = $(this).parents(".cart-item");
                    var itemId = selectedItem.find(".productId").val();
                    ids += itemId + ";";
                }
            })
            if (ids == "") {
                remind("请勾选要下单的商品");
                return;
            }
            window.location.href = "/tg/shoppingCar/settlement?ids=" + ids;
        })
        $(".minus").click(function() {
            var self = $(this);
            var currEl = self.parent().next();
            var curr = new Number(currEl.val());
            if (curr < 2) {
                return;
            }

            var itemId = self.parents(".cart-item").find(".productId").val();
            axios.get('/shoppingCar/updateCart?id=' + itemId + '&productNum=' + (curr - 1))
                .then(function(response) {
                    if (response.data.status == 200) {
                        currEl.val(curr - 1);
                        var thisItem = self.parents(".cart-item");
                        var price = thisItem.find(".singlePrice").text() * thisItem.find(".buyCount").val();
                        thisItem.find(".productPrice").val(price);
                        countTotalPrice();
                    } else {
                        message("修改失败");
                        console.log(response);
                    }
                })
                .catch(function(error) {
                    message("修改失败");
                    console.log(error);
                })
        })
        $(".plus").click(function() {
            var self = $(this);
            var currEl = self.parent().prev();
            var curr = new Number(currEl.val());

            var itemId = self.parents(".cart-item").find(".productId").val();
            axios.get('/shoppingCar/updateCart?id=' + itemId + '&productNum=' + (curr + 1))
                .then(function(response) {
                    if (response.data.status == 200) {
                        currEl.val(curr + 1);
                        var thisItem = self.parents(".cart-item");
                        var price = thisItem.find(".singlePrice").text() * thisItem.find(".buyCount").val();
                        thisItem.find(".productPrice").val(price);
                        countTotalPrice();
                    } else {
                        message("修改失败");
                        console.log(response);
                    }
                })
                .catch(function(error) {
                    message("修改失败");
                    console.log(error);
                })
        })
        $(".checkbox").click(function() {
            countTotalPrice();
        })
        $("#selectAll").click(function() {
            var self = $(this);
            $(".checkbox").prop("checked", self.prop("checked"));
            countTotalPrice();
        })
        $(".type-item").click(function() {
            var self = $(this);
            var pannel = self.parents(".select-type");
            self.parent().children().each(function() {
                $(this).removeClass("selectedType");
            })
            self.addClass("selectedType");
            pannel.find(".price").text("￥" + self.attr("data-price"));
        })
        $(".changeType").click(function() {
            var self = $(this);
            var thisItem = self.parents(".cart-item");
            var pannel = self.parents(".select-type");
            var itemId = thisItem.find(".productId").val();
            var selectedTypeId = pannel.find(".selectedType").attr("data-id");
            var selectedType = pannel.find(".selectedType").text();
            var selectedPrice = pannel.find(".selectedType").attr("data-price");

            axios.get('/shoppingCar/updateCart?id=' + itemId + '&productItemId=' + selectedTypeId)
                .then(function(response) {
                    if (response.data.status == 200) {
                        thisItem.find(".productTypeId").val(selectedTypeId);
                        thisItem.find(".productType").text(selectedType);
                        thisItem.find(".buyCount").val(1);
                        thisItem.find(".singlePrice").text(selectedPrice);
                        thisItem.find(".productPrice").val(selectedPrice);
                        countTotalPrice();
                    } else {
                        message("修改失败");
                        console.log(response);
                    }
                })
                .catch(function(error) {
                    message("修改失败");
                    console.log(error);
                })
                .then(function() {
                    pannel.modal("close");
                })
        })
        $(".delete").click(function() {
            var self = $(this);
            layer.open({
                content: '确认要删除吗？',
                btn: ['确定', '取消'],
                yes: function(index) {
                    var thisItem = self.parents(".cart-item");
                    var id = thisItem.find(".productId").val();
                    window.location.href = "/tg/shoppingCar/dropShoppingCarProduct?id=" + id;
                    layer.close(index);
                }
            });
        })
    })

    function countTotalPrice() {
        var total = 0;
        $(".checkbox").each(function() {
            if ($(this).prop("checked")) {
                var selectedItem = $(this).parents(".cart-item");
                var itemPrice = selectedItem.find(".productPrice").val();
                total += new Number(itemPrice);
            }
        })
        $("#totalPrice").text("￥" + total);
    }
    </script>
</body>

</html>